<script setup>
import {BxisShow,PicCateAllList} from '@/hooks/Picker'
import { reactive, ref } from 'vue';
import {getSerrepairEcho,getSerrepairUpdate} from '@/api/Serrepair'
import ZXSimg from '@/components/ZXSimg/index.vue'
const  cateList=PicCateAllList()
const elform=ref()
const emit=defineEmits(['updateList'])
const queryData=reactive({
  community_code:'',
    tel:'',
    device_name:'',
    desc:'',
    status:0,
    an_photo:'',
    reply:''
})
const formRules={
  reply: [{ required: true, message: "请选择", trigger: "blur" }],
}
const activeName=ref('first')
const repairData=async (id)=>{
  BxisShow.value=true
  let {data}=await getSerrepairEcho(id)
  Object.assign(queryData,data)
}
defineExpose({
  repairData
})
const onSearCh=async ()=>{
  try {
    await elform.value.validate();
  // console.log(111)
  let res=await getSerrepairUpdate(queryData)
  emit('updateList')
  BxisShow.value=false
  } catch (error) {
    
  }
  
}
// 关闭重置
const closeRepair=()=>{
  BxisShow.value=false
   
  Object.assign(queryData,{
    community_code:'',
    tel:'',
    device_name:'',
    desc:'',
    status:0,
    an_photo:'',
    reply:''
  })
  setTimeout(()=>{
    elform.value.resetFields()
  },1000)
}
</script>
<template>
  <div>
    <el-drawer v-model="BxisShow" title="回复报修信息" size="50%" style="position: relative;" @close="closeRepair">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="报修信息" name="first">
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top" >
        <el-form-item label="小区名称" >
        <el-select  placeholder="请输入" v-model="queryData.community_code" clearable style="width: 325px;" disabled>
          <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="联系电话">
        <el-input style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.tel" disabled ></el-input>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.device_name" disabled ></el-input>
      </el-form-item>
      <el-form-item label="报修描述">
        <el-input type="textarea" style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.desc" disabled ></el-input>
      </el-form-item>
    <el-form-item label="图片">
      <template #default="{row}">
        <div class="demo-image__preview">
      <el-image style="width: 100px; height: 100px" :src="`http://124.223.14.236:8881${queryData.an_photo}`" :zoom-rate="1.2"
       :preview-src-list="[`http://124.223.14.236:8881${queryData.an_photo}`]" :initial-index="99" :z-index="9999" fit="cover"
       :preview-teleported="true" />
     </div>
    </template>
    </el-form-item>
      
            </el-form>
    </el-tab-pane>
    <!-- 回复信息 -->
    <el-tab-pane label="回复信息" name="second">
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top" ref="elform"  :rules="formRules">
    <el-form-item label="处理状态">
      <el-radio-group v-model="queryData.status" class="ml-4" style="width: 325px;">
          <el-radio :label="0" size="large">待受理</el-radio>
          <el-radio :label="1" size="large">已受理</el-radio>
          <el-radio :label="2" size="large">已维修</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="回复图片">
      <ZXSimg v-model="queryData.an_photo"/>
    </el-form-item>
    <el-form-item label="报修回复" prop="reply">
      <el-input type="textarea" style="width: 700px;"  placeholder="请输入" clearable v-model="queryData.reply"></el-input>
    </el-form-item>
            </el-form>
    </el-tab-pane>
  </el-tabs>

          <span style="position: absolute; bottom: 30px;right:20px;">  <el-button @click="BxisShow=false">取消</el-button>
            <el-button type="primary" @click="onSearCh">确定</el-button></span>
  </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.demo-image__error .image-slot {
 font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
 font-size: 30px;
}

.demo-image__error .el-image {
 width: 100%;
 height: 200px;
}
</style>